<template>
  <div class="logisticsQuery">
      <div class="logisticsQueryNavBar">
          <van-nav-bar title="找物流" :border="false">
          </van-nav-bar>
      </div>
      <div class="logisticsQueryTba">
          <van-tabs v-model="active" color="#00BF42">
              <van-tab :title="carriage" v-for="(carriage,carr) in carriage" :key="carr"></van-tab>
          </van-tabs>
      </div>
      <div class="ligisticsInfo">
        <div class="shipments">
          <van-field
            readonly
            clickable
            name="area"
            :value="shipments"
            label="发货地址"
            placeholder="请选择省市级"
            @click="showArea = true"
            />
            <van-popup v-model="showArea" position="bottom">
            <van-area
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
            />
            </van-popup>
            <van-field v-model="shipmentsDetail"  placeholder="请输入详细地址" />
         </div>
         <div class="take">
            <van-field
            readonly
            clickable
            name="area"
            :value="take"
            label="收货地址"
            placeholder="请选择省市级"
            @click="showAreatwo = true"
            />
            <van-popup v-model="showAreatwo" position="bottom">
            <van-area
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showAreatwo = false"
            />
            </van-popup>
            <van-field v-model="takeDetail"  placeholder="请输入详细地址" />
         </div>
         <div class="shopInfo">
             <van-field v-model="weight" label="商品重量" placeholder="例如：59KG" />
             <van-field v-model="bulk" label="商品体积" placeholder="例如：10立方米" />
             <van-field v-model="casesnum" label="商品件数" placeholder="例如：12件" />
         </div>
         <div class="shopSelect">
             <van-field label="商品优惠" placeholder="请选择" arrow-direction="right" input-align="right"  readonly />
             <van-field label="是否要求冷藏" placeholder="请选择" input-align="right" readonly />
         </div>
         <div class="money">
             预估价格:<span>{{money}}</span>
         </div>
         <div class="hint">
             <span>温馨提示：发单交易成功后，平台补贴1233元，返回到你的余额账户</span>
         </div>
         <div class="affirmBnt">
             <van-button color="#00C657">确认发单</van-button>
         </div>
      </div>
  </div>
</template>

<script>
export default {
     name:"logisticsQuery",
     data(){
         return{
             weight:'',
             bulk:'',
             casesnum:'',
             takeDetail:'',
             take:'',
             shipmentsDetail:'',
             shipments:'',
             showArea: false,
             showAreatwo: false,
             areaList: {}, 
             active: 0,
             carriage:["空运","汽运"],
             money:"￥77.8",
         }
     },
      methods: {
        onConfirm(shipments) {
        this.value = shipments.map((item) => item.name).join('/');
        this.showArea = false;
      },
    }
}
</script>

<style scoped>
.ligisticsInfo{
    margin-top: 11px;
    background-color: rgba(247,249,252,1);;
}
.shipments{
    margin: 11px 13px;
}
.take{
    margin: 11px 13px;
}
.shopInfo{
   margin: 11px 13px;
}
.shopSelect{
   margin: 11px 13px;
}
.money{
    margin-left: 241px;
    margin-top: 6px;
    background-color: #fff;
}
.money span{
    font-size:18px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(255,98,0,1);
    line-height:20px;
}
.hint{
    margin: 30px 20px;
}
.hint span{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,98,0,1);
    line-height:18px;
}
.affirmBnt{
    margin-top: 30px;
}
.affirmBnt button{
    width: 92%;
    margin: 0 13px;
}
</style>